<template>
	<view class="tabs">
		<view class="tabsbox">
			<view class="tabsItem" v-for="(item,index) in list" :class="{active:index == checkIndex}" @click="checkHandel(index,item)">{{item}}</view>
		</view>
		<view class="tabsTotal">
			<view class="time">7d?2h:23m</view>
			<view class="title">till campaign ends</view>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			checkIndex:{
				type:Number,
				default:0
			}
		},
		data(){
			return{
				list:['You Tasks','Completed'],
				checkIndex:0,
			}
		},
		methods:{
			checkHandel(i,item){
				this.checkIndex = i
				this.$emit("checkHandel",i,item)
			}
		}
	}
</script>

<style scoped lang="scss">
	.tabs{
		width: 100%;
		height: 90rpx;
		border-bottom: 2rpx solid #fff;
		display: flex;
		justify-content: space-between;
		color: #fff;
		margin-bottom: 20rpx;
		.tabsbox{
			width: 70%;
			display: flex;
			.tabsItem{
				width: 30%;
				height: 100%;
				line-height: 90rpx;
				text-align: center;
				font-size: 20rpx;
			}
		}
		.tabsTotal{
			width: 30%;
			padding-right: 20rpx;
			.time{
				font-size: 28rpx;
				height: 40rpx;
				line-height: 40rpx;
				text-align: end;
				color:#9B8B42;
			}
			.title{
				font-size: 14rpx;
				height: 40rpx;
				line-height: 40rpx;
				color:#9B8B42;
				text-align: end;
			}
		}
		
	}
	.active{
		border-bottom: red 4rpx solid;
		
	}
</style>